<template>
    <div>
        <!-- 対象案件一覧 -->
        <h5>対象案件一覧</h5>
        <el-form ref="form" :model="projectListDTO" label-width="80px" :label-position="labelPosition" size="mini"
            @submit.native.prevent>
            <el-form-item label="支社">
                <el-select v-model="projectListDTO.ddlPjBranch" @change="handleFirstSelectChange">
                    <el-option v-for="item in ddlPjBranchListShisya" :key="item.a01M002SectCd"
                        :label="item.a01M002SectNm" :value="item.a01M002SectCd">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="部門">
                <el-select v-model="projectListDTO.ddlPjDept">
                    <el-option v-for="item in ddlPjBranchListBumon" :key="item.a01M002SectCd"
                        :label="item.a01M002SectNm" :value="item.a01M002SectCd">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="オーダ">
                <el-input v-model="projectListDTO.txtPjOrder" size="mini" class="custom-input"></el-input>
            </el-form-item>

            <el-form-item label="顧客">
                <el-input v-model="projectListDTO.txtCustomer" size="mini" class="custom-input"></el-input>
            </el-form-item>

            <el-form-item label="管理区分">
                <el-radio-group v-model="projectListDTO.chkRpmType">
                    <el-radio :label="0">A</el-radio>
                    <el-radio :label="1">B</el-radio>
                    <el-radio :label="2">すべて</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="完了区分">
                <el-checkbox-group v-model="projectListDTO.chkCompCategory">
                    <el-checkbox label="完了も含む" name="type"></el-checkbox>
                </el-checkbox-group>
            </el-form-item>

            <el-form-item>
                <el-button>案件登録</el-button>
                <el-button @click="btnPjSearchClick(projectListDTO)">検索</el-button>
            </el-form-item>
        </el-form>

        <!-- リスク　予防管理検討会 -->
        <h5>リスク　予防管理検討会</h5>
        <el-form ref="form" :model="riskPreventionListDTO" label-width="80px" :label-position="labelPosition"
            size="mini" @submit.native.prevent>
            <el-form-item label="支社">
                <el-select v-model="riskPreventionListDTO.ddlRpiBranch" @change="handleFirstSelectChange">
                    <el-option v-for="item in ddlPjBranchListShisya" :key="item.a01M002SectCd"
                        :label="item.a01M002SectNm" :value="item.a01M002SectCd">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="部門">
                <el-select v-model="riskPreventionListDTO.ddlRpiDept">
                    <el-option v-for="item in ddlPjBranchListBumon" :key="item.a01M002SectCd"
                        :label="item.a01M002SectNm" :value="item.a01M002SectCd">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="プロセス">
                <el-select v-model="riskPreventionListDTO.processNo">
                    <el-option v-for="item in ddlProcessList" :key="item.processNo" :label="item.processName"
                        :value="item.processNo">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="開催日">
                <el-select v-model="riskPreventionListDTO.ddlRpiOpenYear">
                    <el-option v-for="item in ddlRpiOpenYearList" :key="item.openYear" :label="item.openYear"
                        :value="item.openYear">
                    </el-option>
                </el-select>
                年
                <el-select v-model="riskPreventionListDTO.ddlRpiOpenMonth">
                    <el-option v-for="item in optionskaisaiM" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                月
            </el-form-item>

            <el-form-item label="対象オーダ" class="from-select">
                <el-input v-model="riskPreventionListDTO.txtRpiOrder" size="mini" class="custom-input"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button @click="btnRpiSearchClick(riskPreventionListDTO)">検索</el-button>
            </el-form-item>
        </el-form>

        <!-- 品質推進会 -->
        <h5>品質推進会</h5>
        <el-form ref="form" :model="QualityProgressionListDTO" label-width="80px" :label-position="labelPosition"
            size="mini" @submit.native.prevent>
            <el-form-item label="支社">
                <el-select v-model="QualityProgressionListDTO.ddlQpBranch" @change="handleFirstSelectChange">
                    <el-option v-for="item in ddlPjBranchListShisya" :key="item.a01M002SectCd"
                        :label="item.a01M002SectNm" :value="item.a01M002SectCd">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="部門">
                <el-select v-model="QualityProgressionListDTO.ddlQpDept">
                    <el-option v-for="item in ddlPjBranchListBumon" :key="item.a01M002SectCd"
                        :label="item.a01M002SectNm" :value="item.a01M002SectCd">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="開催日">
                <el-select v-model="QualityProgressionListDTO.ddlQpOpenFiscalYear">
                    <el-option v-for="item in ddlQpOpenFiscalYearList" :key="item.openFiscalYear"
                        :label="item.openFiscalYear" :value="item.openFiscalYear">
                    </el-option>
                </el-select>
                年度
                <el-select v-model="QualityProgressionListDTO.ddlQpOpenQuarter">
                    <el-option v-for="item in optionskaisaiYQM" :key="item.value" :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="対象オーダ" class="from-select">
                <el-input v-model="QualityProgressionListDTO.txtQpOrder" size="mini" class="custom-input"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button>品質推進会</el-button>
                <el-button @click="btnQpSearchClick(QualityProgressionListDTO)">検索</el-button>
                <br>
                <el-button>検索結果のCSV出力</el-button>
            </el-form-item>
        </el-form>

    </div>
</template>

<script>

import axios from 'axios';

export default {
    data() {
        return {
            labelPosition: 'left',
            ddlPjBranch: '',
            QualityProgressionListDTO: {
                ddlQpBranch: '',
                ddlQpDept: '',
                ddlQpOpenFiscalYear: '',
                ddlQpOpenQuarter: '',
                txtQpOrder: ''
            },
            projectListDTO: {
                ddlPjBranch: '',
                ddlPjDept: '',
                txtPjOrder: '',
                txtCustomer: '',
                chkRpmType: '',
                chkCompCategory: ''
            },
            riskPreventionListDTO: {
                ddlRpiBranch: '',
                ddlRpiDept: '',
                processNo: '',
                ddlRpiOpenYear: '',
                ddlRpiOpenMonth: '',
                txtRpiOrder: ''
            },
            ddlPjBranchListShisya: [{
                a01M002SectNm: '',
                a01M002SectCd: '',
            }],
            ddlPjBranchListBumon: [{
                a01M002SectNm: '',
                a01M002SectCd: '',
            }],
            ddlProcessList: [{
                processNo: '',
                processName: ''
            }],
            ddlRpiOpenYearList: [{
                openYear: ''
            }],
            ddlQpOpenFiscalYearList: [{
                openFiscalYear: ''
            }],
            optionskaisaiYQM: [{
                value: '1',
                label: '1'
            }, {
                value: '2',
                label: '2'
            }, {
                value: '3',
                label: '3'
            }, {
                value: '4',
                label: '4'
            }],
            optionskaisaiM: [{
                value: '1',
                label: '1'
            }, {
                value: '2',
                label: '2'
            }, {
                value: '3',
                label: '3'
            }, {
                value: '4',
                label: '4'
            }, {
                value: '5',
                label: '5'
            }, {
                value: '6',
                label: '6'
            }, {
                value: '7',
                label: '7'
            }, {
                value: '8',
                label: '8'
            }, {
                value: '9',
                label: '9'
            }, {
                value: '10',
                label: '10'
            }, {
                value: '11',
                label: '11'
            }, {
                value: '12',
                label: '12'
            }
            ],
        };
    },
    created() {
        this.pageLoad();
    },
    methods: {
        pageLoad() {
            axios.get("/api/menu/pageLoad", {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            }).then((res) => {
                if (res.data.code === 1) {
                    this.ddlPjBranchListShisya = res.data.data.ddlPjBranchList
                    this.ddlProcessList = res.data.data.ddlProcessList
                    this.ddlRpiOpenYearList = res.data.data.ddlRpiOpenYearList
                    this.ddlQpOpenFiscalYearList = res.data.data.ddlQpOpenFiscalYearList
                } else if (res.data.code === 0) {
                    this.$notify.error({
                        title: 'ERROR',
                        message: '数据获取失败'
                    });
                }
            })
        },
        handleFirstSelectChange(val) {
            axios.get("/api/menu/selectedIndexChanged", {
                params: {
                    ddlPjBranch: val
                },
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            }).then((res) => {
                if (res.data.code === 1) {
                    this.ddlPjBranchListBumon = res.data.data
                } else if (res.data.code === 0) {
                    this.$notify.error({
                        title: 'ERROR',
                        message: '数据获取失败'
                    });
                }
            })
        },
        btnPjSearchClick(projectListDTO) {
            this.$router.push({
                path: "/project",
                query: {
                    projectListDTO: JSON.stringify(projectListDTO)
                }
            });
        },
        btnRpiSearchClick(riskPreventionListDTO) {
            this.$router.push({
                path: "/risk",
                query: {
                    riskPreventionListDTO: JSON.stringify(riskPreventionListDTO)
                }
            });
        },
        btnQpSearchClick(QualityProgressionListDTO) {
            this.$router.push({
                path: "/quality",
                query: {
                    QualityProgressionListDTO: JSON.stringify(QualityProgressionListDTO)
                }
            });
        },
        onSubmit() {
            console.log('submit!');
        }
    }
};
</script>

<style scoped>
.custom-input {
    width: 200px;
}

.from-select {
    width: 200px;
}
</style>